<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>点击表格切换图片 </title>

</head>
<style>
    .td-class {
        width: 20px;
        height: 20px;
    }
</style>

<script>

</script>


<body>
    <table id="tab" border="1">
        <tr>
            <td class="td-class" style="background:blue"></td>
            <td class="td-class"></td>
            <td class="td-class"></td>
            <td class="td-class"></td>
        </tr>
    </table>
    <img id="showImg" src="001.jpg" style="width:300px" />
    <script>
        /*
            1- 获取 所有td的 ，循环遍历每一个td ，给td添加点击事件
                点击哪个td，得让点击的td背景 blue

                2-改变 img的src属性  点击第0个td的时候，得到   字符串 001.jpg，赋值给图片的src属性
        
        */
        // 1- 获取 所有td的 ，

        var tdArr = document.querySelectorAll('td');
        console.log(tdArr);
        // 循环遍历每一个td ，给td添加点击事件
        tdArr.forEach(function (td, i) {
            td.onclick = function () {
                // 点击事件内部td-》点击的td ，i 点击的td对应的下标
                // this ->点击的td
                console.log('点击了td', td, i, this);
                // 先把所有的td 都去掉背景色
                tdArr.forEach(function (v) { v.style.backgroundColor = '' })

                // 点击哪个td，得让点击的td背景 blue
                td.style.backgroundColor = 'blue'

                // 根据 td的下标 得到图片的地址
                // i 0-》001.jpg   1-》002.jpg  2 3
                var imgUrl = '00' + (i + 1) + '.jpg';
                console.log(imgUrl);

                // 找到图片
                var showImg = document.querySelector('#showImg');
                // 标准属性--dom.属性名 = '属性值'
                showImg.src = imgUrl;


            }
        })


    </script>
</body>

</html>